.kaitify-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0 @padding;
  height: 28px;
  background: @background-color;
  color: @font-color;
  font-size: @font-size;
  font-family: @font-family;
  border: none;
  border-radius: @border-radius;
  transition: background 300ms, color 300ms;

  &,
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    outline: none;
  }

  &.kaitify-dark {
    background: @background-color-dark;
    color: @font-color-dark;
  }

  &:not(:disabled):hover {
    cursor: pointer;
    background: @lightest-theme;
    color: @theme;
  }

  &:not(:disabled):active {
    background: @lighter-theme;
    color: @theme;
  }

  &:not(:disabled).kaitify-button-active {
    background: @lighter-theme;
    color: @theme;
  }

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  &.kaitify-button-block {
    display: flex;
    width: 100%;
  }

  &.kaitify-button-large {
    height: 32px;
  }
}
